<template>
  <view>
    <button @click="onSetTimeCall()">单次计时器setTimeout</button>
    <button @click="onSetTimeCallxy(userName, pwd)">带参数setTimeout</button>
    <button @click="onTimeOut()" type="warn">取消定时器</button>
    <button @click="onInteral()" type="primary">周期定时器</button>
    <button @click="onClearInteral()" type="warn" plain="true">取消定时器</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userName: 'xx',
      pwd: '123',
      timeOutId: null,
      count: 1,
      intearId: null // 注：建议统一命名为 intervalId，符合语义
    };
  },
  methods: {
    onSetTimeCall() {
      console.log("onSetTimeCall：2秒后执行（当前无具体逻辑）");
      // 补充定时器内示例逻辑，避免空回调
      this.timeOutId = setTimeout(() => {
        console.log("单次定时器执行完成（2秒后）");
      }, 2000);
    },
    onSetTimeCallxy(name, pwd) {
      console.log("onSetTimeCallxy-->name:" + name + ",pwd:" + pwd);
      // 补充参数打印逻辑，完善定时器功能
      setTimeout((x, y) => {
        console.log("带参数定时器执行：name=" + x + ", pwd=" + y);
      }, 2000, name, pwd);
    },
    onTimeOut() {
      console.log("onTimeOut：取消单次定时器（ID=" + this.timeOutId + "）");
      clearTimeout(this.timeOutId);
      this.timeOutId = null; // 清空ID，避免重复取消
    },
    onInteral() {
      // 先清除已有定时器，防止重复创建
      if (this.intearId) clearInterval(this.intearId);
      
      this.intearId = setInterval(() => {
        this.count++;
        console.log("周期定时器执行：当前计数=" + this.count);
      }, 1000);
    },
    onClearInteral() {
      console.log("onClearInteral：取消周期定时器（ID=" + this.intearId + "）");
      clearInterval(this.intearId);
      this.intearId = null; // 清空ID，避免重复取消
    }
  }
};
</script>

<style>
button {
  margin: 30rpx;
}
</style>